<template>
    <view class="cu-modal bottom-modal " :class="showType ? 'show' : ''">
        <view class="modal-mask" @click="cancelFn"></view>
        <view class="cu-dialog" :style="{ backgroundColor: bgColor }">
            <view class="cu-bar bg-white" v-if="headerType">
                <view class="action text-green">确定</view>
                <view class="action text-blue" @click.stop="cancelFn">取消</view>
            </view>
            <view class="modal-content" :style="{ backgroundColor: bgColor }">
                <slot name="content"></slot>
            </view>
            <view class="modal-bottom">
                <slot name="bottom"></slot>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    name: 'bottom-popup',
    data() {
        return {};
    },
    props: {
        // 是否显示
        showType: {
            type: Boolean,
            default: false
        },
        // 是否显示头部
        headerType: {
            type: Boolean,
            default: true
        },
        bgColor: {
            type: String,
            default: '#ffffff'
        },
        borderRaiuds: {
            type: Boolean,
            default: false
        }
    },
    methods: {
        cancelFn() {
            this.$emit('cancel');
        }
    },
    mounted() { }
};
</script>

<style lang="scss">
.bottom-modal {
    .modal-mask {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    .modal-content {
        text-align: left;
        border-top-right-radius: 30rpx;
        border-top-left-radius: 30rpx;
        min-height: 400rpx;
    }
    .cu-dialog {
        overflow: none;
        border-top-right-radius: 30rpx;
        border-top-left-radius: 30rpx;
    }
    .modal-bottom {
        width: 100%;
        background-color: #ffffff;
    }
}

@media all and (orientation: landscape) {
    .cu-modal {
        text-align: right !important;
    }
    .bottom-modal {
        .bottom-modal {
            background-color: blue;
        }
        .cu-dialog {
            width: 375px !important;
            height: 100%;
            border-top-right-radius: 0;
            border-top-left-radius: 0;
        }
    }
}
</style>
